<template>
  <form class="login_container" @submit.prevent="login">
    <div class="welcome">欢迎来到中医体质检测系统</div>
    <div class="qrc_container">
      <img src="../assets/qrc_apk.png" alt="Android APK QRC">
      <span>扫码获取Android APK</span>
    </div>
    <div class="account_container">
      <label for="account">账号:</label>
      <input id="account" type="text" placeholder="请输入账号" v-model.trim="loginInfo.account" />
    </div>
    <div class="password_container">
      <label for="password">密码:</label>
      <input id="password" type="password" placeholder="请输入密码" v-model.trim="loginInfo.password" autocomplete />
    </div>
    <button class="login" type="submit">登录</button>
  </form>
  <div class="mobile_qrc_container">
      <img src="../assets/qrc_apk.png" alt="Android APK QRC">
      <span>为了最佳体验, 请安装APK后使用</span>
    </div>
</template>

<script setup>
  import { reactive } from "vue";
  import { useRouter } from "vue-router";
  import { useUserInfoStore } from "@/stores";
  import { request } from "@/request";

  defineEmits(["vnode-unmounted"])
  const userInfoStore = useUserInfoStore()
  const router = useRouter()
  const loginInfo = reactive({ account: "", password: "" })
  const login = function () {
    console.log(`loginInfo.account=${loginInfo.account}, loginInfo.password=${loginInfo.password}`)
    request.post("/login", {
      account : loginInfo.account,
      password: loginInfo.password
    }).then(res => {
      console.log("/login", res)
      const { msg, code } = res.data
      if (code === 0) {
        router.push({
          path: "/main",
          query: {
            account: loginInfo.account
          }
        })
        userInfoStore.account = loginInfo.account
      } else {
        Object.assign(loginInfo, { account: "", password: "" })
        alert(msg)
      }
    }).catch((err) => {
      const { msg } = err.response.data
      alert(msg)
      Object.assign(loginInfo, { account: "", password: "" })
    })
  }
</script>

<style scoped>
  .login_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .welcome {
    position: absolute;
    left: 90px;
    top: 60px;
    font-size: 24px;
    font-weight: bold;
    color: blueviolet;
  }
  .qrc_container {
    position: absolute;
    right: 90px;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .qrc_container img{
    width: 200px;
  }

  .account_container {
    display: flex;
    font-size: 24px;
  }

  .password_container {
    margin-top: 24px;
    display: flex;
    font-size: 24px;
  }

  #account,
  #password {
    width: 300px;
    padding: 0 8px;
    margin-left: 10px;
  }

  .login {
    margin-top: 20px;
    font-size: 16px;
    padding: 5px 24px;
  }

  @media screen and (min-width: 400px) {
    .mobile_qrc_container {
      display: none;
    }
  }

  @media screen and (max-width: 400px){
    .login_container {
      display: none;
    }
    .mobile_qrc_container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

</style>
